<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            heigth: 100px;
        }

        #root {
            width: 1000px;
            display: flex; /*采用flex布局*/
            flex-wrap: wrap; /*换行，默认不换行*/
        }

        #head {
            height: 100px;
        }

        #mid {
            display: flex; /*采用flex布局*/
        }

        #left {
            width: 300px;
        }

        #right {
            width: 700px;
        }

        #foot {
            height: 100px;

        }

        #tbl {
            heigth: 400px;
            width: 500px;
        }

        td {
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="root">
    <div id="head"></div>
    <div id="mid">
        <div id="left"></div>
        <div id="right">
            <table id="tbl"></table>
        </div>
    </div>
    <div id="foot"></div>
</div>
<script>
    var persons = [
        {name: "张三", age: "33", sex: "男"},
        {name: "老王", age: "45", sex: "男"},
        {name: "桂香", age: "19", sex: "女"},
        {name: "李卫红", age: "60", sex: "女"},
        {name: "二狗", age: "5", sex: "男"},
    ];

    function showTable() {
        var str = "";
        //for (i = 0; i < persons.length; i++) {
        for (var i in persons) {
            // if(i in persons)  in操作符 用来判断属性是否属于某个对象
            str += "<tr>"
            for (var j in persons[i]) {
                str += "<td>" + persons[i][j] + "</td>"
            }
            str += `<td>
                <a href="javascript:del(${i})">删除</a>
                </td></tr>`;
        }
        /*str += `
         <tr>
         <td>${persons[i].name}</td>
         <td>${persons[i].age}</td>
         <td>${persons[i].sex}</td>
         <td><a href="javascript:del(${i})">删除</a></td>
         </tr>`;
         }*/
        document.querySelector('#tbl').innerHTML = str;
    }

    showTable();

    function del(e) {
        delete persons[e]; //delete操作符
        showTable();
    }

    function max(a, b) {
        return a > b ? a : b;
    }
    function f(x) {
        return 10 * x + 22;
    }
    var a = f;

    /*
     *
     *
     * */
    var xiaoMianGuan = {
        name: "老倌面",
        address: "银盆南路88号",
        phone: "0731-3333-6666",
        paoMian: function (a) {//对象还可以包括方法
            var menu = ["红烧牛肉面", "牛杂粉", "炸酱面", "刀削面"];
            return menu[a];
        }
    }
    var mian = xiaoMianGuan.paoMian(1);
    console.log(mian);

    var oneDayThing = [
        function () {
            console.log(`
                刷牙
                喝牛奶
                洗脸
                跑步
                上班`)
        },
        function () {
            console.log(`
            上班
            下班
            吃饭
            看电影
            `)
        },
        function () {
            console.log(`
            睡觉
            做梦
            梦到吃西瓜
            `)
        },
        function () {
            console.log(`
           起夜
            `)
        }
    ];
    for (var i in oneDayThing) {
        oneDayThing[i]();
    }

    var shengXiao = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"];//顺序不对...

</script>
</body>
</html>